<template>
	<div class="max">
		<my-header  :backBtn="true">
			<div slot="title">
				教师请假
			</div>
		</my-header>
		<div class="tl cont-nof">
			<div class="weui-navbar">
				<div class="weui-navbar__item " :class="{'weui-bar__item_on':menu==0}" @click="menu=0">
					申请
				</div>
				<div class="weui-navbar__item" :class="{'weui-bar__item_on':menu==1}" @click="menu=1">
					请假记录
				</div>
			</div>
			<div class="tl leave-list">
				<div v-if="menu==0" class="max" style="overflow: auto;">
					<div class="weui-cells weui-cells_form" style="margin-top: 0;">
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">请假类型</label></div>
							<div class="weui-cell__bd">
								<my-select :option="option[0]" class="fr" @on-change="leaveType">{{postData.leaveType}}</my-select>
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd"><label for="" class="weui-label">开始时间</label></div>
							<div class="weui-cell__bd">
								<input class="weui-input" type="datetime-local" v-model="postData.startTime" placeholder="请选择开始时间" />
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd"><label for="" class="weui-label">结束时间</label></div>
							<div class="weui-cell__bd">
								<input class="weui-input" type="datetime-local" v-model="postData.endTime" placeholder="请选择结束时间" />
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd"><label for="" class="weui-label">请假理由</label></div>
							<div class="weui-cell__bd">
								<textarea class="weui-textarea my-textatea" placeholder="请输入请假理由" rows="3" v-model="postData.reason"></textarea>
							</div>
						</div>
					</div>
					<div class="submitBtn">
						<a href="javascript:;" class="weui-btn weui-btn_block weui-btn_primary my-weui-btn" @click="submit">提交</a>
					</div>
				</div>
				<div class="weui-panel__bd" v-else>
					<div class="weui-loadmore weui-loadmore_line" v-if="list.records.length==0">
						<span class="weui-loadmore__tips">暂无数据</span>
					</div>
					<div v-else>
						<div class="weui-media-box weui-media-box_text" v-for="item in list.records">
							<router-link :to="{path: '/applyDetailsPer',query:item}">
								<div>
									<span class="weui-badge fr" v-if="item.status==0" style="background: orange;">待审批</span>
									<span class="weui-badge fr" v-if="item.status==1" style="background: #06AD56;">已同意</span>
									<span class="weui-badge fr" v-if="item.status==2">不同意</span>
									<h4 class="weui-media-box__title">{{item.teacherName}}</h4>
									<p class="weui-media-box__desc">请假类型:{{item.leaveType}}</p>
									<p class="weui-media-box__desc">请假开始时间:{{item.startTime}}</p>
									<p class="weui-media-box__desc">请假结束时间:{{item.endTime}}</p>
								</div>
							</router-link>
						</div>
						<a href="javascript:void(0);" class="weui-cell weui-cell_link" v-if="list.current*list.size<=list.total">
							<div class="weui-cell__bd" @click="loadmore">查看更多</div>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	import mySelect from '@/components/select.vue'
	export default {
		components: {
			mySelect
		},
		data() {
			let time = this.$getNowDate('dateTime');
			return {
				menu: 0,
				option: [{
					value: '请选择请假类型',
					type: 'picker',
					data: [{
						label: '事假',
						value: '事假'
					}, {
						label: '病假',
						value: '病假'
					}],
				}, ],
				postData: {
					leaveType: '请选择请假类型', //请假类型
					startTime: time,
					endTime: time,
					reason: '', //请假原因
				},
				list: {
					records: []
				},
				param: {
					current: 1, //当前页页码
					size: 10, //一页显示几条数据
				},
			}
		},
		watch: {
			menu(val) {
				if (val == 1) {
					this.queryFn();
				}
			}
		},
		methods: {
			loadmore() {
				this.param.size += 5;
				this.queryFn();
			},
			leaveType(val) {
				this.postData.leaveType = val[0].value;
			},
			toast(text, type) {
				this.$toast.show(text, type);
				let _this = this;
				setTimeout(function() {
					_this.$toast.hide();
				}, 1000)
			},
			submit() {
				if (this.postData.leaveType == '请选择请假类型' || this.postData.startTime == "" || this.postData.startTime == "" || this.postData
					.reason == "") {
					this.toast('请将信息填写完毕', 'forbidden');
					return
				};
				if (!(this.$compareT(this.postData.startTime, this.postData.endTime))) {
					this.toast('结束时间不能早于开始时间', 'forbidden');
					return
				};
				if (this.postData.reason == '') {
					this.toast('请输入请假理由', 'forbidden');
					return
				};
				//完成以上验证
				//提交数据
				this.$toast.show('提交中', 'loading');
				this.$http.postTeaLeavePers(this.postData).then(resp => {
					this.$toast.hide();
					this.toast('提交成功', 'success');
					this.postData.leaveType = '请选择请假类型';
					this.postData.reason = '';
					this.menu = 1;
				})
			},
			queryFn() {
				this.$toast.show('数据加载中', 'loading');
				this.$http.fetchTeaLeavePers(this.param).then(resp => {
					this.list = resp.data;
					this.$toast.hide()
				});
			}
		},
	}
</script>

<style scoped>
	.leave-list {
		height: calc(100% - 5.6rem);
		overflow: auto;
	}

	.submitBtn {
		margin: 1rem auto;
		left: 5%;
		width: 90%;
	}
</style>
